<template>
    <div class="repair">
     <el-tabs v-model="activeTab" tab-position="top" type="border-card" class="tab-container">
          <!-- 我要报修 -->
          <el-tab-pane name="repairRequest" @tab-click="onTabClick('repairRequest')">
            <template #label>
              <repairIcon/>&nbsp;&nbsp;
              <span>我要报修</span>
            </template>
            <div v-if="activeTab === 'repairRequest'" class="content-container">
              <!-- Report Repair Content -->
              <div v-if="progressVisible" class="progress-container">
                <div class="progress-title">报修进度</div>
                <el-steps :active="progressStage" finish-status="success" class="progress-steps">
                  <el-step title="正在填写"></el-step>
                  <el-step title="报修提交"></el-step>
                  <el-step title="等待受理"></el-step>
                </el-steps>
              </div>

              <el-card class="box-card repair-card">
                <template #header>
                  <div class="form-title">报修信息单</div>
                </template>
                <el-form :model="repairForm" label-width="100px" class="form-container" ref="ruleForm" :rules="rules">
                  <el-form-item label="报修类型" prop="type">
                    <el-cascader
                      v-model="repairForm.type"
                      :options="repairOptions"
                      placeholder="请选择报修类型"
                    ></el-cascader>
                  </el-form-item>
               <el-form-item label="报修时间" prop="time">  
                    <el-date-picker  
                      v-model="repairForm.time"  
                      type="datetime"  
                      placeholder="选择报修时间"  
                      format="YYYY-MM-DD HH:mm:ss"  
                      :picker-options="pickerOptions"  
                    ></el-date-picker>  
                  </el-form-item>  
              <el-form-item label="报修内容" prop="content">
                    <el-input
                      v-model="repairForm.content"
                      type="textarea"
                      placeholder="请描述报修问题"
                      rows="4"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="联系方式" prop="contact">
                    <el-input
                      v-model="repairForm.contact"
                      placeholder="请输入联系方式-手机号"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="联系地址" prop="address">
                    <el-input
                      v-model="repairForm.address"
                      placeholder="请输入联系地址"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="物品图片" prop="file">
                    <el-upload
                      list-type="picture-card"
                      :on-change="uploadFile"
                      :on-remove="removeFile"
                      :auto-upload="false"
                      :limit="6"
                      action="#"
                      ref="uploadRef"
                    >
                      <Imgicon/>
                    </el-upload>
                  </el-form-item>
                  <el-form-item class="form-actions">
                    <el-button type="primary" @click="validateForm" >提交报修</el-button>
                    <el-button @click="resetForm">重置表单</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
            </div>
          </el-tab-pane>

          <!-- 我的工单 -->
          <el-tab-pane name="workOrders">
            <template #label>
              <tworepairIcon></tworepairIcon>&nbsp;&nbsp;
              <span>我的工单</span>
            </template>
            <div v-if="activeTab === 'workOrders'" class="content-container">
              <!-- Work Orders Content -->
              <div class="work-order-list">
                <el-card v-for="order in workOrders" :key="order.orderNumber" class="order-card">
                  <div class="order-info">
                    <div >工单编号: {{ order.id }}</div>
                    <div style="display: flex;">状态: 
                      <div v-if="order.state" style="color: green;">已维修</div>
                      <div v-else style="color: red;">未维修</div>
                    </div>
                    <div>报修日期: {{ order.repairTime }}</div>
                    <div class="div-4"><el-button type="primary" size="mini" @click="openDialog(order)" >查看详情</el-button></div>
                  </div>
                </el-card>
              </div>
    <el-dialog
      v-if="dialogVisible"
      :visible="dialogVisible"
      v-model="dialogVisible"
      title="工单详情"
      width="50%"
      @close="resetDialog"
    >
      <div v-if="selectedOrder">
        <div class="detail"><strong>工单编号:</strong> {{ selectedOrder.id }}</div>
        <div class="detail" style="display:flex;"><strong>状态:</strong> 
          <div v-if="selectedOrder.state" style="color: green;">已维修</div>
          <div v-else style="color: red;">未维修</div>
        </div>
        <div class="detail"><strong>报修日期:</strong> {{ selectedOrder.repairTime }}</div>
        <div class="detail"><strong>问题描述:</strong> {{ selectedOrder.content }}</div>
        <div v-if="selectedOrder.imgs && selectedOrder.imgs.length">
          <p class="detail"><strong>问题图片:</strong></p>
          <el-image
            v-for="(img, index) in selectedOrder.imgs"
            :key="index"
            :src="Path.imgPath + img"
            class="problem-image"
            style="margin-bottom: 10px;"
          />
        </div>
      </div>
    
    </el-dialog>
            </div>
          </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
    import { ref, reactive } from 'vue';
import Imgicon from '@/components/iconBywzy/uploadImg';
import repairIcon from '@/components/iconBywzy/repair.vue';
import tworepairIcon from '@/components/iconBywzy/repair-two.vue';
import router from '@/router';
import { get, post } from '@/plugins/axios';
import { Path } from '@/constant';
const ruleForm = ref();
const uploadRef = ref(null); 
const isBlue = ref(false);
const dialogVisible = ref(false);
const selectedOrder = ref(null);


const toggleColor = () => {
  isBlue.value = !isBlue.value;
};

const validateFutureDate = (rule, value, callback) => {
  if (!value) {
    return callback(new Error('请选择报修的时间'));
  }
  const selectedDate = new Date(value);
  const currentDate = new Date();
  const sixHoursLater = new Date(currentDate.getTime() + 6 * 60 * 60 * 1000);
  if (selectedDate <= sixHoursLater) {
    return callback(new Error('请选择至少6小时以后的日期'));
  }
  callback();
};

const rules = reactive({
  type     : [{ required: true, message: '请选择报修类型', trigger: 'blur' }],
  time     : [{ required: true, validator: validateFutureDate, trigger: 'blur' }],
  content  : [{required:true,message:'请描述您的保修问题，方便维修人员了解情况',trigger:'blur'}],
  contact  : [{required:true,message:'请输入您的联系方式-手机号',trigger:'blur'}],
  address  : [{required:true,message:'请输入您的详细地址',trigger:'blur'}],
  file     : [{required:true,message:'请上传您要维修的物品图片，最好展示损坏部位',trigger:'blur' }]
 });

const activeTab = ref('repairRequest');
const repairForm = reactive({
  type: '',
  time : '',
  content: '',
  contact: '',
  contact: '',
  address: '',
  file:[]
});
const repairOptions = ref([
  {
    value: '家电维修',
    label: '家电维修',
    children: [
      { value: '电视机', label: '电视机' },
      { value: '空调', label: '空调' },
    ],
  },
  {
    value: '家具维修',
    label: '家具维修',
    children: [
      { value: '沙发', label: '沙发' },
      { value: '床', label: '床' },
    ],
  },
]);
const validateForm=()=>{
  ruleForm.value.validate((valid)=>{
    if(valid){
      // 这里面向后端发送请求
      post(Path.repairAdd,{
        type: repairForm.type,
        time : repairForm.time.getTime(),
        content: repairForm.content,
        contact: repairForm.contact,
        address: repairForm.address,
        files: repairForm.file
      },content => {
        submitRepair()
        resetForm()
        getTableDate()
      })
    }else{
      return false
    }
  })
}

const progressVisible = ref(true);
const progressStage = ref(0);
const workOrders = ref([]);
getTableDate()
function getTableDate(){
  //取工单数据
  get(Path.repairGetByUid,null,content=>{
    workOrders.value=content
  })
}

const submitRepair = () => {
  progressStage.value = 1;
  nextStage();
};

const nextStage = () => {
  setTimeout(() => {
    if (progressStage.value < 3) {
      progressStage.value += 1;
      nextStage();
    }
  }, 3000);
};

const onTabClick = (tabName) => {
  if (tabName === 'repairRequest') {
    progressVisible.value = true;
  }
  isBlue.value = true;
};

const viewWorkOrder = (order) => {
  // 查看工单详情逻辑

};
const openDialog = (order) => {
  selectedOrder.value = order;
  dialogVisible.value = true;
  console.dir(dialogVisible.value)
};

const resetDialog = () => {
  dialogVisible.value = false;
  selectedOrder.value = null;
};

const resetForm = () => {
  ruleForm.value.resetFields();
  repairForm.file=[]

  console.dir(uploadRef)
    if(uploadRef.value ){
      uploadRef.value.clearFiles()
    }
};

const uploadFile = (file) => {
  // 上传文件逻辑
    repairForm.file.push(file.raw)
};

const removeFile = (file,fileList) => {
  // 移除文件逻辑
  repairForm.file=fileList
};

</script>

<style scoped>
.detail{
  margin-top: 15px;
}
.repair{
    width: 100%;
}
.tab-container {
  width: 93%;
  background-color: #ffffff;
  border-radius: 10px;
}

.el-tabs__header {
  background-color: #f4f6f9;
  padding: 10px;
  border-bottom: 1px solid #ebeef5;
}

.el-tabs__item {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.el-tabs__active-bar {
  background-color: #409EFF;
}

.content-container {
  padding: 20px;
}

.progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.progress-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.progress-steps {
  width: 60%;
  max-width: 400px;
  margin: 0 auto;
}

.repair-card {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.9); /* Adjust opacity here */
  border-radius: 10px;
  position: relative;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
}

.form-container {
  padding: 20px;
}

.form-title {
  font-size: 20px;
  font-weight: bold;
  padding: 10px 0;
  color: #3a3a3a;
  text-align: center;
}

.work-order-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 10px;
}

.order-card {
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.order-card:hover {
  transform: translateY(-10px);
  box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.2);
}

.order-info {
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  display: flex;
  flex-direction: column;
  
}
.div-4{
  padding-top: 10%;

}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.el-button {
  border-radius: 5px;
}
</style>